<template>
	<view class="container">
		<view class="themeBgColor topFixed" style="width: 100%;" :style="{'height': statusBarHeight + 'px'}"></view>
		<view class="navBg"></view>
		<view class="calc display flow titleAre">
			<view class="display flow userInfoAre">
				<image :src="userInfo.avatarUrl" class="userImg" v-if="hasLogin && userInfo"></image>
				<uni-icons :type="'contact-filled'" :color="'grey'" size="60" v-else @click="togglePopup('center','tip')"/>
				<view class="display column userItem">
					<text>{{userName}}</text>
					<view class="themeBdColor tagAre borderR" v-if="isShop">
						<text>会员</text>
					</view>
				</view>
			</view>
			<view class="display flow membersBtn" @click="membersClick" v-if="!isShop">
				<text>加入会员</text>
				<image src="/static/images/icon/right-small.png" ></image>
			</view>
		</view>
		<myOrderAre class="myOrderAre" @loginClick="loginClick"></myOrderAre>
		<view class="line"></view>
		<view class="display flow mainAre">
			<uni-grid :column="3" :highlight="true" @gridChange="gridChange">
				<uni-grid-item v-for="(item, index) in personalList" :key="index">
					<view class="display column mainItemAre" v-if="item.text != '客服'">
						<image :src="item.img"></image>
						<text>{{item.text}}</text>
					</view>
					<button class="display column mainItemAre" open-type="contact" v-else>
						<image :src="item.img"></image>
						<text>{{item.text}}</text>
					</button>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-popup ref="showtip" :mask-click="false" :type="popType" @change="change">
			<loginPop class="pop" @cancel="cancel"></loginPop>
		</uni-popup>
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @change="change">
			<integral :integralList="integralList"></integral>
		</uni-transition>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import data from '@/common/data.js'
	import common from '@/common/common.js'
	import {mapState,mapMutations} from 'vuex'
	import myOrderAre from '@/components/myOrderAre.vue'
	import loginPop from '@/components/loginPop.vue'
	import integral from '@/components/integral/integral.vue'
	export default {
		components:{myOrderAre,loginPop,integral},
		data() {
			return {
				popType: '',
				personalList: data.personalList,
				transShow: false,
				integralList: {},
				statusBarHeight: uni.getSystemInfoSync()['statusBarHeight']
			}
		},
		watch:{			async hasLogin(newVal){
				console.log(newVal);				if(newVal){					this.integralList = await common.setIntegral(this.$store.state.userId,1,1)					if(this.integralList){
						this.transShow = true
						this.transShow = await common.integralAni()
					}				}
			}		},
		computed:{
			...mapState(['hasLogin','userInfo','isShop','shopStatus','transfromClass','modeClass']),
			userName(){
				let text = this.userInfo?this.userInfo.nickName: 'Hi~ 等你很久了'
				return text
			}
		},
		methods: {
			...mapMutations(['setIsShop','setShopId']),
			togglePopup(type,open) {
				this.popType = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type){
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log(e)
			},
			gridChange(e){
				let index = e.detail.index
				if(this.hasLogin){
					switch (this.personalList[index].text){
						case '我的小店':
							this.userShop(index)
							break;
						case '我的收藏':
						case '地址管理':
							uni.navigateTo({
								url: '/subPackages/mine/' + this.personalList[index].page + '/' + this.personalList[index].page
							})	
							break;
						case '积分商城':
						case '我的积分':
							uni.navigateTo({
								url: '/subPackages/integral/' + this.personalList[index].page + '/' + this.personalList[index].page
							})	
							break;
					}
				}else{
					this.togglePopup('center','tip')
				}
			},
			userShop(index){
				if(this.isShop && this.shopStatus == 1){
					uni.navigateTo({
						url: '/subPackages/mine/' + this.personalList[index].page + '/' + this.personalList[index].page
					})	
				}else{
					// util.getAjax(this.global.apiUrl + '/if_user_shop',(res)=>{
					// 	console.log(res);
					// 	if(res.data){
					// 		switch (Number(res.data.code)){
					// 			case 0:
					// 				util.showModal('提示','您的商铺正在审核中~ 请您耐心等待')
					// 				break;
					// 			case 1:
					// 				this.setIsShop(res.data.code)
					// 				this.setShopId(res.data.shop_id)
					// 				uni.navigateTo({
					// 					url: '/subPackages/mine/' + this.personalList[index].page + '/' + this.personalList[index].page
					// 				})	
					// 				break;
					// 			case 2:
					// 				util.showModalAll('提示','您的商铺没有通过审核，请尝试重新审核或咨询平台',()=>{
					// 					uni.navigateTo({
					// 						url: '/subPackages/mine/membersCenter/membersCenter'
					// 					})
					// 				})
					// 				break;
					// 			case 3:
					// 				util.showModalAll('提示','您暂无小店，请先申请成为会员~',()=>{
					// 					uni.navigateTo({
					// 						url: '/subPackages/mine/membersCenter/membersCenter'
					// 					})
					// 				})
					// 				break;
					// 		}
					// 	}
					// },{user_id: this.$store.state.userId})
					uni.navigateTo({
						url: '/subPackages/mine/membersCenter/membersCenter?isShop=' + this.isShop 
					})
				}
			},
			membersClick(){
				if(this.hasLogin){
					uni.navigateTo({
						url: '/subPackages/mine/membersCenter/membersCenter?isShop=' + this.isShop 
					})
				}else{
					this.togglePopup('center','tip')
				}
			},
			loginClick(){
				this.togglePopup('center','tip')
			}
		}
	}
</script>

<style lang="scss">
	page{
		@include backG;
	}
	.container{
		position: relative;
	}
	.myOrderAre,.pop{
		@include width;
	}
	.titleAre{
		@include margin(140rpx,'top');
		.userInfoAre{
			@include justify-content('s');
			.userImg{
				@include widthHeight(120rpx);
				@include borderR(20rpx);
			}
			.userItem{
				height: 120rpx;
				@include flex-align-justify(center,space-between);
				@include font($fontSize,white);
				@include margin(30rpx,'left')
				@include padding(10rpx 0);
				.tagAre{
					@include height(40rpx);
					@include padding(0 20rpx);
					@include font($fontSize - 4rpx);
				}
			}
		}
		.membersBtn{
			@include widthHeight(146rpx,52rpx);
			@include borderR(26rpx);
			@include font($fontSize - 4rpx);
			@include justify-content;
			background-image: -moz-linear-gradient( 0deg, rgb(207,187,145) 0%, rgb(217,199,162) 17%, rgb(216,197,160) 32%, rgb(229,214,184) 64%, rgb(241,229,204) 100%);
			background-image: -webkit-linear-gradient( 0deg, rgb(207,187,145) 0%, rgb(217,199,162) 17%, rgb(216,197,160) 32%, rgb(229,214,184) 64%, rgb(241,229,204) 100%);
			background-image: -ms-linear-gradient( 0deg, rgb(207,187,145) 0%, rgb(217,199,162) 17%, rgb(216,197,160) 32%, rgb(229,214,184) 64%, rgb(241,229,204) 100%);
			box-shadow: 3rpx 6rpx 8px 0px rgba( 0, 0, 0, 0.3);
			@include margin(20rpx,'right');
			image{
				@include widthHeight(9rpx,12rpx);
				@include margin(10rpx,'left');
			}
		}
	}
	.orderAre{
		@include margin(75rpx auto 35rpx);
	}
	.line{
		@include widthHeight(100%,20rpx);
		@include backG($pageBg);
	}
	.mainItemAre{
		@include widthHeight(247rpx,200rpx);
		@include font;
		@include flex-align-justify;
		image{
			@include widthHeight(40rpx);
			@include margin(30rpx,'bottom');
		}
	}
</style>
